<template>
  <div class="search_id">
    <div class="title"><span>承运合同管理</span></div>
    <el-container>
      <el-main>
        <!-- 查询start -->
        <div style="float: left">
          <el-form
            :model="formInline"
            ref="formInlineRef"
            :inline="true"
            class="demo-form-inline"
          >
            <el-col>
              <el-form-item label="合同标题" prop="contractTitle">
                <el-input
                  v-model="formInline.contractTitle"
                  placeholder="请输入合同标题"
                ></el-input>
              </el-form-item>
              <el-form-item label="外协单位" prop="carriageUnit">
                <el-input
                  v-model="formInline.carriageUnit"
                  placeholder="请输入外协单位"
                ></el-input>
              </el-form-item>
              <el-form-item label="外协负责人" prop="carriageMan">
                <el-input
                  v-model="formInline.carriageMan"
                  placeholder="请输入外协负责人"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col>
              <el-form-item label="经办人" prop="operator">
                <el-input
                  v-model="formInline.operator"
                  placeholder="请输入经办人"
                ></el-input>
              </el-form-item>
              <el-form-item label="签订时间" prop="signedTime">
                <el-input
                  v-model="formInline.signedTime"
                  placeholder="请输入货主手机号"
                ></el-input>
              </el-form-item>
              <el-form-item label="审批状态" prop="states">
                <el-input
                  v-model="formInline.states"
                  placeholder="请输入货主单位"
                ></el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="onSubmit(formInline)"
                  ><i class="el-icon-search"></i>查询</el-button
                >
                <el-button @click="resetForm('formInlineRef')"
                  ><i class="el-icon-refresh-left"></i>重置</el-button
                >
              </el-form-item>
            </el-col>
          </el-form>
        </div>
        <!-- 查询end  -->
        <el-col>
          <div style="float: left">
            <el-button
              type="primary"
              @click="dialogFormVisible = true"
              size="small"
              plain
              ><i class="el-icon-plus"></i>新增</el-button
            >
            <el-button
              type="danger"
              @click="DelListCar(delList)"
              size="small"
              plain
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </div>
        </el-col>
        <!--新增承运合同-->
        <el-dialog
          v-bind="$attrs"
          v-on="$listeners"
          @open="onOpen"
          @close="onClose"
          title="新增承运合同"
          :visible.sync="dialogFormVisible"
        >
          <el-row :gutter="10">
            <el-form
              ref="elForm"
              :model="ruleForm"
              :rules="rules"
              size="medium"
              label-width="100px"
            >
              <el-col :span="11">
                <el-form-item label="合同标题：" prop="ContractTitle">
                  <el-input
                    v-model="ruleForm.ContractTitle"
                    placeholder="请输入合同标题："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="承运单位：" prop="CarriageUnit">
                  <el-input
                    v-model="ruleForm.CarriageUnit"
                    placeholder="请输入承运单位："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="承运负责人:" prop="CarriageMan">
                  <el-input
                    v-model="ruleForm.CarriageMan"
                    placeholder="请输入承运负责人:"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="线路：" prop="Line">
                  <el-input
                    v-model="ruleForm.Line"
                    placeholder="请输入线路："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="吨运价：" prop="FreightRates">
                  <el-input
                    v-model="ruleForm.FreightRates"
                    placeholder="请输入吨运价："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="包车条件吨位："
                  prop="CharterConditionTonnage"
                >
                  <el-input
                    v-model="ruleForm.CharterConditionTonnage"
                    placeholder="请输入包车条件吨位："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="包车金额：" prop="CharterValue">
                  <el-input
                    v-model="ruleForm.CharterValue"
                    placeholder="请输入包车金额："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="经办人：" prop="Operator">
                  <el-input
                    v-model="ruleForm.Operator"
                    placeholder="请输入经办人："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="签订时间：" prop="SignedTime">
                  <el-input
                    v-model="ruleForm.SignedTime"
                    placeholder="请输入签订时间："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="合同金额：" prop="ContractMoney">
                  <el-input
                    v-model="ruleForm.ContractMoney"
                    placeholder="请输入合同金额："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item
                  label="合同标的或情况说明："
                  prop="ProjectDescription"
                >
                  <el-input
                    v-model="ruleForm.ProjectDescription"
                    type="textarea"
                    placeholder="请输入合同标的或情况说明："
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="合同主要条款/变更条款" prop="MainClause">
                  <el-input
                    v-model="ruleForm.MainClause"
                    type="textarea"
                    placeholder="请输入合同主要条款/变更条款"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="备注" prop="Remark">
                  <el-input
                    v-model="ruleForm.Remark"
                    type="textarea"
                    placeholder="请输入合同主要条款/变更条款"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="合同文本(附件)："
                  prop="Accessory"
                  required
                >
                 <el-upload
                  ref="Accessory"
                  :file-list="ImageUrlfileList"
                  :action="ImageUrlAction"
                  :before-upload="ImageUrlBeforeUpload"
                  :on-success="handleAvatarSuccess"
                  accept="image/*"
                  :headers="tou"
                >
                  <el-button size="small" type="primary" icon="el-icon-upload"
                    >点击上传</el-button
                  >
                </el-upload>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div slot="footer" class="dialog-footer">
            >
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="addContract(ruleForm)"
              >提交审批</el-button
            >
          </div>
        </el-dialog>
        <!--新增end-->

        <!--修改承运合同-->
        <el-dialog
          v-bind="$attrs"
          v-on="$listeners"
          @open="onOpen"
          @close="onClose"
          title="修改承运合同"
          :visible.sync="dialogFormVisibleEdit"
        >
          <el-row :gutter="10">
            <el-form
              :model="ruleFormEdit"
              status-icon
              :rules="rules"
              ref="ruleFormEdit"
              label-width="110px"
              class="demo-ruleForm"
            >
              <el-col :span="11">
                <el-form-item label="合同标题：" prop="contractTitle">
                  <el-input
                    v-model="ruleFormEdit.contractTitle"
                    placeholder="请输入合同标题："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="承运单位：" prop="carriageUnit">
                  <el-input
                    v-model="ruleFormEdit.carriageUnit"
                    placeholder="请输入承运单位："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="承运负责人:" prop="carriageMan">
                  <el-input
                    v-model="ruleFormEdit.carriageMan"
                    placeholder="请输入承运负责人:"
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="线路：" prop="line">
                  <el-input
                    v-model="ruleFormEdit.line"
                    placeholder="请输入线路："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="吨运价：" prop="freightRates">
                  <el-input
                    v-model="ruleFormEdit.freightRates"
                    placeholder="请输入吨运价："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item
                  label="包车条件吨位："
                  prop="charterConditionTonnage"
                >
                  <el-input
                    v-model="ruleFormEdit.charterConditionTonnage"
                    placeholder="请输入包车条件吨位："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="包车金额：" prop="charterValue">
                  <el-input
                    v-model="ruleFormEdit.charterValue"
                    placeholder="请输入包车金额："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="经办人：" prop="operator">
                  <el-input
                    v-model="ruleFormEdit.operator"
                    placeholder="请输入经办人："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="签订时间：" prop="signedTime">
                  <el-input
                    v-model="ruleFormEdit.signedTime"
                    placeholder="请输入签订时间："
                    clearable
                    :style="{ width: '100%' }"
                  >
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="合同金额：" prop="contractMoney">
                  <el-input
                    v-model="ruleFormEdit.contractMoney"
                    placeholder="请输入合同金额："
                    clearable
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item
                  label="合同标的或情况说明："
                  prop="projectDescription"
                >
                  <el-input
                    v-model="ruleFormEdit.projectDescription"
                    type="textarea"
                    placeholder="请输入合同标的或情况说明："
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="22">
                <el-form-item label="合同主要条款/变更条款" prop="mainClause">
                  <el-input
                    v-model="ruleFormEdit.mainClause"
                    type="textarea"
                    placeholder="请输入合同主要条款/变更条款"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="11">
                <el-form-item label="备注" prop="remark">
                  <el-input
                    v-model="ruleFormEdit.remark"
                    type="textarea"
                    placeholder="请输入备注"
                    :autosize="{ minRows: 4, maxRows: 4 }"
                    :style="{ width: '100%' }"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item
                  label="合同文本(附件)："
                  prop="accessory"
                  required
                >
                  <el-upload
                    ref="accessory"
                    :file-list="AccessoryfileList"
                    :action="AccessoryAction"
                    :before-upload="AccessoryBeforeUpload"
                  >
                    <el-button size="small" type="primary" icon="el-icon-upload"
                      >选取文件</el-button
                    >
                    <div slot="tip" class="el-upload__tip">
                      只能上传不超过 20MB 的文件
                    </div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-form>
          </el-row>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleEdit = false">取 消</el-button>
            <el-button type="primary" @click="UpdContract(ruleFormEdit)"
              >确 定</el-button
            >
          </div>
        </el-dialog>
        <!-- 修改end -->
        <!-- <el-col>
          <div style="float: left">
            <el-button
              type="primary"
              @click="dialogFormVisible = true"
              size="small"
              plain
              ><i class="el-icon-plus"></i>新增</el-button
            >
            <el-button
              type="danger"
              @click="DelListCar(delList)"
              size="small"
              plain
              ><i class="el-icon-delete"></i>删除</el-button
            >
          </div>
        </el-col> -->

        <!--查看start-->
       <el-dialog title="查看承运合同" :visible.sync="dialogFormVisibleShow">
        <button @click="handleDown">导出pdf</button>
        <table :model="ruleFormShow" id="demo" border="1" class="table_style">
          <tr>
            <td colspan="2"  style="text-align: center;font-size: 20px;line-height: 50px;">
               <b>禾域物流合同</b>
              </td>
          </tr>
          <div></div>
            <tr>
                <td>合同标题</td>
                <td>{{ruleFormShow.contractTitle}}</td>
            </tr>
            <tr>
                <td>承运单位</td>
                <td>{{ruleFormShow.carriageUnit}}</td>
            </tr>
            <tr>
                <td>承运负责人</td>
                <td>{{ruleFormShow.carriageMan}}</td>
            </tr>
            <tr>
                <td>线路</td>
                <td>{{ruleFormShow.line}}</td>
            </tr>
            <tr>
                <td>吨运价</td>
                <td>{{ruleFormShow.charterValue}}</td>
            </tr>
            <tr>
                <td>包车条件吨位</td>
                <td>{{ruleFormShow.charterConditionTonnage}}</td>
            </tr>
            <tr>
                <td>包车金额</td>
                <td>{{ruleFormShow.contractMoney}}</td>
            </tr>
            <tr>
                <td>经办人</td>
                <td>{{ruleFormShow.operator}}</td>
            </tr>
             <tr>
                <td>签订时间</td>
                <td>{{ruleFormShow.signedTime}}</td>
            </tr>
             <tr>
                <td>合同金额</td>
                <td>{{ruleFormShow.contractMoney}}</td>
            </tr>
             <tr>
                <td>合同标的或情况说明</td>
                <td>{{ruleFormShow.projectDescription}}</td>
            </tr>
            <tr>
                <td>合同直呼要条款/变更条款</td>
                <td>{{ruleFormShow.mainClause}}</td>
            </tr>
             <tr>
                <td>审批人</td>
                <td>smart</td>
            </tr>
            <tr>
              <span>广州禾域物流有限公司<img src="@/assets/R-C.png" alt="" width="80" height="80"/></span>
                
            </tr>
        </table>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="editCarry()">确 定</el-button>
        </div>
        </el-dialog>
        <!--查看end-->
        <!-- 显示start -->
        <el-table
          ref="multipleTable"
          :data="
            tableData.slice(
              (currentPage - 1) * pageSize,
              currentPage * pageSize
            )
          "
          tooltip-effect="dark"
          style="width: 100%; text-align: center"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column fixed type="selection"> </el-table-column>
          <el-table-column
            prop="contractNum"
            label="合同编号"
            width="140px"
          ></el-table-column>
          <el-table-column
            prop="contractTitle"
            label="合同标题"
            width="130px"
          ></el-table-column>
          <el-table-column
            prop="carriageUnit"
            label="外协单位"
            width="180px"
          ></el-table-column>
          <el-table-column prop="carriageMan" label="外协负责人" width="100px">
          </el-table-column>
          <el-table-column prop="line" label="线路" width="120px">
          </el-table-column>
          <el-table-column
            prop="freightRates"
            label="吨运价"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="charterConditionTonnage"
            label="包车条件吨运"
            width="120px"
          ></el-table-column>
          <el-table-column
            prop="charterValue"
            label="包车金额"
            width="100px"
          ></el-table-column>
          <el-table-column
            prop="signedTime"
            label="签订日期"
            width="140px"
          ></el-table-column>
          <el-table-column prop="operator" label="经办人"></el-table-column>
          <el-table-column prop="createTime" label="创建时间"></el-table-column>
          <!-- <el-table-column
            prop="state"
            label="状态"
            :formatter="State"
          ></el-table-column> -->
          <el-table-column prop="approver" label="审批人"></el-table-column>
          <el-table-column fixed="right" label="操作">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.id)"
                type="text"
                size="small"
                ><i class="el-icon-success"></i>查看</el-button
              >
              <el-button
                type="text"
                size="small"
                @click="
                  (dialogFormVisibleEdit = true), EditContract(scope.row.id)
                "
                ><i class="el-icon-edit"></i>编辑</el-button
              >
              <el-button
                type="text"
                size="small "
                @click="SingledelCar(scope.row.id)"
                ><i class="el-icon-close"></i>删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 显示end -->
        <!-- 分页start -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
        <!-- 分页ends -->
      </el-main>
    </el-container>
  </div>
</template>

<script>
import htmlToPdf from "@/unit/htmlToPdf"; //PDF导出
export default {
  name: "vehicle",
  data() {
    return {
      inheritAttrs: false,
      //表单数据
      tableData: [], //显示
      delList: [], //被选中的记录数据
      ids: [], //批量删除ID
      //分页
      currentPage: 1, //当前页码
      total: 0, //总条数
      pageSize: 5, //每页数据条
      //查询
      formInline: {
        factoryPlate: "",
        carNumber: "",
        carName: "",
        companies: "",
      },
      //查询是否外协
      options: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "是",
          label: "是",
        },
        {
          value: "否",
          label: "否",
        },
      ],
      value: "",
      //添加
      dialogFormVisibleShow:false,//导出模态框
      dialogTableVisible: false,
      dialogFormVisible: false, //添加模态框
      dialogFormVisibleEdit: false, //反填模态框
      //添加
      ruleForm: {
        ContractTitle: "",
        CarriageUnit: "",
        CarriageMan: "",
        Line: "",
        FreightRates: "",
        CharterConditionTonnage: "",
        CharterValue: "",
        Operator: "",
        SignedTime: "",
        ContractMoney: "",
        ProjectDescription: "",
        MainClause: "",
        Accessory: "备注",
        CreateTime:Date.now,
        CreatorId:"3fa85f64-5717-4562-b3fc-2c963f66afa6",
        Deleted:"true",
        ContractNum:"HT"+Date.now,
        Approver:"王总",
        Remark:"",
      },
      ruleFormShow:{
        contractTitle: "",
        carriageUnit: "",
        carriageMan: "",
        line: "",
        freightRates: "",
        charterConditionTonnage: "",
        charterValue: "",
        operator: "",
        signedTime: "",
        contractMoney: "",
        projectDescription: "",
        mainClause: "",
        accessory: "备注",
        createTime:Date.now,
        creatorId:"3fa85f64-5717-4562-b3fc-2c963f66afa6",
        deleted:"true",
        contractNum:"HT"+Date.now,
        approver:"王总",
        remark:"",
      },
      //编辑
      ruleFormEdit: {
        id: "",
        contractTitle: "",
        carriageUnit: "",
        carriageMan: "",
        line: "",
        freightRates: "",
        charterConditionTonnage: "",
        charterValue: "",
        operator: "",
        signedTime: "",
        contractMoney: "",
        projectDescription: "",
        mainClause: "",
        accessory: "",
        createTime:Date.now(),
        creatorId:"3fa85f64-5717-4562-b3fc-2c963f66afa6",
        deleted:"true",
        contractNum:"HT"+Date.now(),
        remark:"",
      },
      formLabelWidth: "120px",
      rules: {
        ContractTitle: [
          {
            required: true,
            message: "请输入合同标题：",
            trigger: "blur",
          },
        ],
        CarriageUnit: [
          {
            required: true,
            message: "请输入承运单位：",
            trigger: "blur",
          },
        ],
        CarriageMan: [
          {
            required: true,
            message: "请输入承运负责人:",
            trigger: "blur",
          },
        ],
        Line: [
          {
            required: true,
            message: "请输入线路：",
            trigger: "blur",
          },
        ],
        FreightRates: [
          {
            required: true,
            message: "请输入吨运价：",
            trigger: "blur",
          },
        ],
        CharterConditionTonnage: [
          {
            required: true,
            message: "请输入包车条件吨位：",
            trigger: "blur",
          },
        ],
        CharterValue: [
          {
            required: true,
            message: "请输入包车金额：",
            trigger: "blur",
          },
        ],
        Operator: [
          {
            required: true,
            message: "请输入经办人：",
            trigger: "blur",
          },
        ],
        SignedTime: [
          {
            required: true,
            message: "请输入签订时间：",
            trigger: "blur",
          },
        ],
        ContractMoney: [
          {
            required: true,
            message: "请输入合同金额：",
            trigger: "blur",
          },
        ],
        ProjectDescription: [
          {
            required: true,
            message: "请输入合同标的或情况说明：",
            trigger: "blur",
          },
        ],
        MainClause: [
          {
            required: true,
            message: "请输入合同主要条款/变更条款",
            trigger: "blur",
          },
        ],
      },
      //上传图片
      ImageUrlfileList: [],
      ImageUrlAction: "https://localhost:44319/api/Shipper/UpLoad",
      dialogVisible: false,
      //索引
      vehicleIndex: 0,
    };
  },
  created() {
    //商品显示
    this.GetList();
  },
  inject: ["reload"], //注入
  methods: {
    State: function (row) {
      if (row.states == 1) {
        return "待提交";
      } else if (row.states == 2) {
        return "待审批";
      } else if (row.states == 3) {
        return "已通过";
      } else {
        return "已拒绝";
      }
    },
    //查看
    handleClick(item) {
      console.log(item);
       this.dialogFormVisibleShow = true;
      this.axios
        .get("https://localhost:44319/api/app/t-mSContract-carrier/"+item+"/the-carrier")
        .then((res) => {
          this.ruleFormShow = res.data;
        });
    },
    //全选
    handleSelectionChange(val) {
      console.log("handleSelectionChange--", val);
      this.delList = val; //把将要删除的数据存进集合中
    },
    // 分页
    handleSizeChange(val) {
      //console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    handleCurrentChange(val) {
      //console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //查询
    onSubmit(formInline) {
      this.axios
        .get(
          "http://192.168.31.63:8033/VehicleManagementAPI/GetCarRegistration?factoryPlate=" +
            formInline.factoryPlate +
            "&carNumber=" +
            formInline.carNumber +
            "&carName=" +
            formInline.carName +
            "&companies=" +
            formInline.companies +
            ""
        )
        .then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.count;
          console.log(res.data);
        });
    },
    //重置
    resetForm(formInlineRef) {
      this.$refs[formInlineRef].resetFields();
    },
    ImageUrlBeforeUpload(file) {
      let isRightSize = file.size / 2048 / 2048 < 5;
      if (!isRightSize) {
        this.$message.error("文件大小超过 5MB");
      }
      let isAccept = new RegExp("image/*").test(file.type);
      if (!isAccept) {
        this.$message.error("应该选择image/*类型的文件");
      }
      return isRightSize && isAccept;
    },
    handleAvatarSuccess(response, file) {
      this.ruleForm.llicencePhoto = response.newFileName;
      console.log(this.llicencePhoto);
    },
    //导出PDF
    handleDown() {
      htmlToPdf.downloadPDF(document.querySelector("#demo"), "承运合同表");
    },

    //显示合同管理集合
    GetList() {
      this.axios
        .get(
          "https://localhost:44319/api/app/t-mSContract-carrier/carrier"
        )
        .then((res) => {
          this.tableData = res.data;
          this.total = res.data.totalcount;
          console.log(res.data);
        });
    },
    //添加合同
    addContract(ruleForm) {
      console.log(ruleForm);
      this.axios({
            url:"https://localhost:44319/api/app/t-mSContract-carrier/carrier",
            method:"post",
            data:ruleForm,
      })
        .then((res) => {
          if (res.data == 0) {
            this.$message.error("添加失败");
            this.dialogFormVisible = false; //关闭模态框
            this.reload(); //局部刷新
          } else {
            this.$message.success("添加成功");
            this.dialogFormVisible = false; //关闭模态框
            this.reload(); //局部刷新
          }
        });
    },
    //单删
    SingledelCar(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.axios({
            url: "https://localhost:44319/api/app/t-mSContract-carrier/carrier?ids=" + id,
            method: "delete",
          }).then((res) => {
            console.log(res);
            if (res.data == 0) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    //反填模态框
    EditContract(item) {
      this.dialogFormVisibleEdit == true;
      this.axios
        .get("https://localhost:44319/api/app/t-mSContract-carrier/"+item+"/the-carrier")
        .then((res) => {
          console.log(res.data);
          this.ruleFormEdit = res.data;
        });
    },
    //修改货主合同
    UpdContract(ruleFormEdit) {
      console.log(ruleFormEdit);
      this.axios({
            url: "https://localhost:44319/api/app/t-mSContract-carrier/carrier",
            method: "put",
            data: ruleFormEdit,
      })
        .then((res) => {
          if (res.data == 0) {
            this.$message.error("修改失败");
            this.dialogFormVisible = false; //关闭模态框
            this.reload(); //局部刷新
          } else {
            this.$message.success("修改成功");
            this.dialogFormVisible = false; //关闭模态框
            this.reload(); //局部刷新
          }
        });
    },
    //批量删除
    DelListCar(rows) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          //循环获取要删除的Id并存进数组中
          rows.forEach((element) => {
            this.ids.push(element.registrationID);
          });
          // console.log(JSON.stringify(this.ids));
          // console.log(JSON.stringify(this.ids).length);
          //删除ID数组
          var num = JSON.stringify(this.ids).substring(
            1,
            JSON.stringify(this.ids).length - 1
          ); //装换成json格式在截取
          console.log(num);
          //Ajax执行删除
          this.axios({
            url:
              "http://192.168.31.63:8033/VehicleManagementAPI/DelCar?id=" + num,
            method: "post",
          }).then((res) => {
            console.log(res.data);
            if (res.data.meta == 200) {
              this.$message({
                type: "success",
                message: "删除成功!",
              });
              this.reload(); //局部刷新
            } else {
              this.$message.error("删除失败！");
              this.reload(); //局部刷新
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>

<style scoped>
.search_id {
  width: 100%;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.title {
  width: 100%;
  height: 50px;
  background-color: #f3f3f3;
}
.title span {
  float: left;
  padding-top: 15px;
  color: #999999;
  margin-left: -80px;
}
.el-upload__tip {
  line-height: 1.2;
}
 #demo {
    background-color: #fff;
    width: 912px;
    /* height: 400px; */
    margin: auto;
    padding: 40px;
    box-sizing: border-box;
  }

  .table_style td,tr {
    padding: 10px;
    font-size: 15px;
  }

  .table_style {
    border-collapse: collapse;
    width: 80%;
    text-align: center
  }
</style>




